<template>
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-12">
      <h1 class="text-4xl font-bold text-primary mb-4">
        Nuxt 4 + Vue 3 + UnoCSS + SCSS + TypeScript + Vite
      </h1>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        这是一个使用最新技术栈构建的Nuxt项目
      </p>
    </header>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      11111111111111111111111111111
    </div>

    <div class="mt-12 text-center">
      <button class="btn-primary mr-4">开始使用</button>
      <button class="btn-secondary">查看文档</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义Props类型
interface CardProps {
  title: string;
  description: string;
  icon: string;
}

</script>

<style scoped lang="scss">
.container {
  max-width: 1200px;
}

header {
  h1 {
    @apply text-4xl font-bold text-primary mb-4;
  }
}
</style>